<template>
    <div class="layout-app">
		<!-- main -->
			<!-- 新增 -->
		<div class="editksFile">
			<el-dialog title="编辑科室档案" :visible.sync="dialogFormVisible" width="70%" :before-close="handleAddClose">
				<el-divider></el-divider>
				<!-- tabs -->
				<div class="tabs">
					<div class="tabsMain">
						<!-- tabs-left -->
						<div class="tabs-left">
							<!-- 表单 -->
							<el-form ref="form" :model="editForm" label-width="80px" size="mini" v-loading="loading">
								<el-row :gutter="20">
								  <el-col :span="v.spanRows" type="flex" v-for="(v,i) in formType" :key="i">
									  <!-- input -->
									  <el-form-item v-if="v.type == 'input'" :label="v.label">
										<el-input v-if="v.zdy" v-autoCode="deptCode" :suffix-icon='v.prefix' v-model="$data.editForm[v.modelValue]" :disabled="v.disabled" placeholder="请输入内容"></el-input>
										<el-input v-else :suffix-icon='v.prefix' v-model="$data.editForm[v.modelValue]" @input="iname(v,i)" placeholder="请输入内容"></el-input>
									  </el-form-item>
									  <!-- select -->
									  <el-form-item v-if="v.type == 'select'" :label="v.label">
										<el-select v-model="$data.editForm[v.modelValue]" placeholder="请选择" @focus="sname(v,i)" @change="scname">
										    <el-option v-for="(item,index) in $data[v.op]" :key="index" :label="item.label" :value="item"> 
											<span style="float: center; color: #8492a6; font-size: 12px">{{ item.label }}</span></el-option>
										</el-select>
									  </el-form-item>
									  <!-- date -->
									  <el-form-item v-if="v.type == 'date'" :label="v.label">
										<el-date-picker class="autoWidth" :picker-options="pickerOptions" type="date" placeholder="选择日期" v-model="$data.editForm[v.modelValue]"></el-date-picker>
									  </el-form-item>
								  </el-col>
								</el-row>
					
							</el-form>
						</div>
						<!-- tables-right -->
						<div class="tabs-right">
							<editksFileTable @sonData="sonData" :deptId="deptId"></editksFileTable>
						</div>
					</div>
				</div>
			  <div slot="footer" class="dialog-footer">
				<el-button size="mini" type="primary" @click="addNewDiction" v-loading="loading">完成编辑</el-button>
				<el-button size="mini" @click="dialogFormVisible = false">取消</el-button>
			  </div>
			</el-dialog>
		</div>
    </div>
</template>

<script>
// self
import addksFileType from './addksFileType.js'
// selfs / js
import Pinyin from "../../../external/pinyin.js"; //中译音
// prop
import editksFileTable from './editksFileTable.vue'
// 接口
import { addDept,getDeptAttribute,updateDept  } from "@/api/ks/ks.js";
export default {
	inject:['reload'],        //注入App里的reload方法
	components:{
		editksFileTable,editksFileTable
	},
	data(){
		return{
			//str
			idx:'',
			value:'',
			deptCode:'',
			//num
			//ble
			loading:false,
			dialogFormVisible:false,
			//arr
			formType:[],
			sexOptions:[{id:1,label:'男',value:'男'},{id:2,label:'女',value:'女'}],
			// statusOptions:[{id:1,label:'是',value:'是'},{id:2,label:'否',value:'否'}],
			statusOptions:[{id:1,label:'可用',value:'可用'},{id:2,label:'禁用',value:'禁用'}],
			fzrOptions:[
				{id:2,label:'杨勇',value:'杨勇',tel:'18783139022'},
				{id:1,label:'张培东',value:'张培东',tel:'18483115507'},
				{id:3,label:'杜作强',value:'杜作强',tel:'14736661316'},
				{id:4,label:'陈南',value:'陈南',tel:'19308401491'},
				{id:5,label:'杨世江',value:'杨世江',tel:'15087758905'},
				{id:6,label:'吴笙榕',value:'吴笙榕',tel:'13148512027'},
				{id:7,label:'陈科均',value:'陈科均',tel:'13778968177'},
				],
			specialtyNameOptions:[
				{id:1,label:'预防保健科',value:'预防保健科'},{id:2,label:'全科医疗科',value:'全科医疗科'},{id:3,label:'内科',value:'内科'},
				{id:4,label:'呼吸内科专业',value:'呼吸内科专业'},{id:5,label:'消化内科专业',value:'消化内科专业'},{id:6,label:'神经内科专业',value:'神经内科专业'},
				{id:7,label:'心血管内科专业',value:'心血管内科专业'},{id:8,label:'血液内科专业',value:'血液内科专业'},{id:9,label:'肾病学专业',value:'肾病学专业'},
			],
			deptTypeOptions:[
				{id:1,label:'门诊临床',value:'门诊临床'},{id:2,label:'住院临床',value:'住院临床'},{id:3,label:'医技',value:'医技'},
				{id:4,label:'行政',value:'行政'},{id:5,label:'后勤',value:'后勤'},{id:6,label:'药库',value:'药库'},
				{id:7,label:'药房',value:'药房'},{id:8,label:'其它',value:'其它'}
			],
			medicineTypeOptions:[
				{id:1,label:'西医',value:'西医'},{id:2,label:'中医',value:'中医'},{id:3,label:'民族医',value:'民族医'},
				{id:4,label:'中西医结合',value:'中西医结合'},{id:5,label:'其它',value:'其它'}
			],
			//obj
			pickerOptions: {
			  disabledDate(time) {
				return time.getTime() > Date.now();
			  },
			  shortcuts: [{
				text: '今天',
				onClick(picker) {
				  picker.$emit('pick', new Date());
				}
			  }, {
				text: '昨天',
				onClick(picker) {
				  const date = new Date();
				  date.setTime(date.getTime() - 3600 * 1000 * 24);
				  picker.$emit('pick', date);
				}
			  }, {
				text: '一周前',
				onClick(picker) {
				  const date = new Date();
				  date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
				  picker.$emit('pick', date);
				}
			  }]
			},
			editForm:{
				deptCode:'',  //科室编码
				status:'',  //有效状态
				deptName:'',  //科室名称
				pyCode:'',  //拼音简码
				personInCharge:'',  //负责人
				personInChargeTel:'',  //负责人电话
				specialtyName:'',  //科室专业
				physicalPosition:'',//物理位置
				returnVisitNum:0,  //返诊期限
				deptType:'',  //科室类型
				medicineType:'',  //医学类型
				remark:'',  //备注
				operatingUser:'',// 操作人
				// 科室属性
				departmentAttribute:[]
			},
			deptId:0,
		}
	},
	mounted() {
		// 左侧提交表单
		this.formType = addksFileType.map(function(v) {
			return v
		})

	},
	updated() {
		
	},

	methods:{
		handleBind() {
			return this.deptCode
		  },
		// 键盘事件
		 handleKeyup(event) {
		  // 检查按键
		  if (event.key === 'Enter') {
			// 执行相应的动作
			console.log('Enter key was pressed');
		  }
		},
		// 打开model
		async openeditModel(val){
			console.log(val,'父组件传过来的');
			this.editForm = val
			this.deptId = this.editForm.id
			this.dialogFormVisible = true;
		},
		//  select聚焦
		sname(v,i) {
			// v.id = i;
			this.idx = i;
			// i event
			switch (i) {
				case 1:
					// 有效状态
					console.log('id索引为1的');
					break;
			}
		},
		scname(v){
			v.id = this.idx;
			// v.tel !== undefined ? this.editForm.personInChargeTel = v.tel : v.tel
			// i event
			switch (this.idx) {
				case 1:
				// 字段映射
					this.editForm.status = v.value
					break;
				case 4:
					// 高级事件
					this.editForm.personInCharge = v.value
					v.tel !== undefined ? this.editForm.personInChargeTel = v.tel : v.tel
					break;
				case 6:
					// 科室专业  确定Value键值对
					this.editForm.specialtyName = v.value
					break;
				case 9:
					// 科室类型 deptType  确定Value键值对
					this.editForm.deptType = v.value
					break;
				case 10:
					// 医学类型 medicineType 确定Value键值对
					this.editForm.medicineType = v.value
					break;
				}
		},
		// inputVal to editForm
		iname(v,i){
			i = v.id
			// i event
			switch (i) {
				case 2:
					// 同步赋值
					setTimeout(() => {
						// 第一个输入框为科室名称
						this.editForm.pyCode = this.makePy(this.editForm.deptName).toUpperCase();//自生成编码拼接：中译音大写
					}, 888)
					break;
			}
		},
		// 控制科室属性新增model，接收子组件传递过来的值并赋值
		sonData(newVal){
			// console.log(newVal,'子子组件传过来的');
			let res = [];
			newVal.forEach(function(item) {
			  res.push(item);
			});
			this.editForm.departmentAttribute = res
			// this.editForm.departmentAttribute.concat((JSON.parse(JSON.stringify(newVal))))
		},
		//新增保存
		async addNewDiction(){
			// 1、在点击编辑后，从钩子函数上获取到数据
			let userInfo = JSON.parse(localStorage.getItem('userInfo'))
			this.editForm.operatingUser = userInfo.userName
			let rs = await updateDept(this.editForm)
			if (rs.code === 200){
			this.disabled = true;
			this.loading = true;
			setTimeout(() => {
			this.$message({
				message: '科室档案更新完成！',
				type: 'success',
				duration: 2000,
			});
			this.loading = false;
			this.disabled = false;
			this.dialogFormVisible = false;
			}, 1500)
			this.$emit('loadData') //数据重新渲染
			}else{
			//验证失败
			this.$message({
			message:'fail！',
			type:"info"
			});
			}
		},
		handleAddClose(done) {
			this.$confirm('确认关闭？')
			  .then(_ => {
				  done();
				// this.formdisabled = true;
				this.reload();
				// done();
			  })
			  .catch(_ => {
				this.formdisabled = this.formdisabled;
			  });
		},
	},
	
}
</script>

<style lang="less" scoped>
.layout-app{
    width: 100%;
    height: 100%;
    display: flex;
	background-color: #f8f8f8;
   .editksFile{
		/deep/ .el-dialog__header{
			padding: 12px;
			background-color: #007bb0;
		}

		/deep/ .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
			margin-bottom: 8px;
		}
		/deep/ .el-dialog__title{
			color: #fff;
			font-size: 12px;
		}
		/deep/ .el-dialog__headerbtn .el-dialog__close{
			color: #fff;
		}
		/deep/ .el-dialog__headerbtn .el-dialog__close:hover{
			background-color: brown;
		}
		/deep/ .el-dialog__body{
			padding: 0;
		}
		/deep/ .el-divider--horizontal{
			margin: 0;
		}
		/deep/ .el-form-item__label{
			display: flex;
			justify-content: right;
			font-size: 12px;
		}
		// self
		// 选项卡
		.tabs{
			
			.tabsMain{
				display: flex;
				border: 1px solid #f4f4f4;
				.tabs-left{
					flex: 1;
					padding:12px 0 0 12px;
					border: 1px solid #e8f0ee;
					// date flex
					.autoWidth{
						width: 100%; /* 设置宽度为100% */
					}
					/deep/ .el-input__icon{
						color: brown;
					}
				}
				.tabs-right{
					flex: 1;
					padding:12px;
					margin-left: 8px;
					border: 1px solid #e8f0ee;
				}
			}
			
			
		}
	}
}
</style>